<template>
  <div class="max">
    <div class="max_left">
      <!-- 企业信息 -->
      <div class="maxleftbox"
           id="top">
        <div class="maxleft_title">企业信息</div>
        <div class="maxleft_title1">
          <div class="photos">
            <div class="photos1">
              <div class="avatars"><img v-if="form.doorPicId"
                     :src="previewUrl + form.doorPicId"
                     alt="文件丢失，请返回重新上传">
              </div>
              <p>门头照片</p>
            </div>
            <div class="photos2">
              <div class="photos2left">
                <div class="avatars"><img v-if="form.workshopPicId[0]"
                       :src="previewUrl + form.workshopPicId[0]"
                       alt="文件丢失，请返回重新上传"></div>
              </div>
              <div class="photos2right">
                <div class="avatars"><img v-if="form.workshopPicId[1]"
                       :src="previewUrl + form.workshopPicId[1]"
                       alt="文件丢失，请返回重新上传"></div>
              </div>
              <div class="ps">工作间照片 <i>（两张不同视角）</i></div>
            </div>
            <div class="photos3">
              <div class="avatars"><img v-if="form.businessLicensePicId"
                     :src="previewUrl + form.businessLicensePicId"
                     alt="文件丢失，请返回重新上传"></div>
              <p>营业执照 <i>（照片/扫描件）</i></p>
            </div>
            <div class="photos4">
              <div class="avatars"><img v-if="form.idCardFrontPicId"
                     :src="previewUrl + form.idCardFrontPicId"
                     alt="文件丢失，请返回重新上传"></div>
              <p>头像面</p>
            </div>
            <div class="photos5">
              <div class="avatars"><img v-if="form.idCardBackPicId"
                     :src="previewUrl + form.idCardBackPicId"
                     alt="文件丢失，请返回重新上传"></div>
              <p>国徽面</p>
            </div>
          </div>
        </div>
        <div class="yaoqiu">
          <h4>上传要求</h4>
          <p>1.门头照片要求看到维修厂名称和整体格局</p>
          <p>2.工作间照片需要能看到工位全貌（比如可以看到一排4个工位），需要有一张工位有车的照片</p>
          <p>3.如是证件扫描件，需加盖公章，公章需清晰，可看到公司全称；证件原件拍照，需清晰、平整</p>
          <p>4.认证需要人工审核，您可以收到审核信息</p>
          <p>5.您提交的所有资料将被加上水印，仅作迅车通认证使用。</p>
          <h4 class="yaoqiuh4">请核对一下信息是否正确：<i>(根据上传图片自动识别，如有错误请手动修改)</i></h4>
          <!-- 表单 -->

          <div class="clickxx">
            <a-row>
              <a-col :span="12"><span>公司名称： <i>{{form.tenantName}}</i></span></a-col>
              <a-col :span="12"><span>公司简称： <i>{{form.shortName}}</i></span></a-col>
            </a-row>
            <a-row>
              <a-col :span="12"><span>统一社会信用代码： <i>{{form.creditCode}}</i></span></a-col>
              <a-col :span="12"><span>法人代表： <i>{{form.legalPerson}}</i></span></a-col>
            </a-row>
            <a-row>
              <a-col :span="12"><span>法人代表身份证： <i>{{form.legalPersonIdCard}}</i></span></a-col>
              <a-col :span="12"><span>联系人： <i>{{form.contact}}</i></span></a-col>
            </a-row>
            <a-row>
              <a-col :span="12"><span>联系电话： <i>{{form.mobile}}</i></span></a-col>
            </a-row>
            <a-row>
              <a-col :span="24"><span>门店地址： <i>
                    {{form.address.province}}
                    {{form.address.city}}
                    {{form.address.district}}
                    {{form.address.street}}
                    {{form.address.detailAddr}}</i></span></a-col>
            </a-row>
          </div>
        </div>
      </div>

      <!-- 开票信息 -->
      <div class="writMessage"
           id="bot">
        <div class="maxleft_title">开票信息</div>
        <div class="maxleft_title1">
          <div class="clickxx">
            <a-row>
              <a-col :span="12"
                     style="font-size:14px;color:#333;"> 发票信息</a-col>
            </a-row>
            <a-row style="margin-left:30px">
              <a-col :span="24">
                <span>发票类型：{{invoiceObject[form.invoice.invoiceType] || ''}}</span>
              </a-col>
            </a-row>
            <a-row style="margin-left:30px">
              <a-col :span="12"><span>发票抬头： <i>{{form.invoice.title}}</i></span></a-col>
              <a-col :span="12"><span>纳税人识别号： <i>{{form.invoice.taxRegNo}}</i></span></a-col>
            </a-row>
            <a-row>
              <a-col :span="12"
                     style="font-size:14px;color:#333;"> 发票收件</a-col>
            </a-row>
            <a-row style="margin-left:30px">
              <a-col :span="12"><span>收件人： <i>{{form.invoice.accepter}}</i></span></a-col>
              <a-col :span="12"><span>联系电话： <i>{{form.invoice.acceptMobile}}</i></span></a-col>
            </a-row>
            <a-row style="margin-left:30px;">
              <a-col :span="24"><span>所在区域： <i>{{form.invoice.province}} {{form.invoice.city}} {{form.invoice.street}} {{form.invoice.district}}</i></span></a-col>
            </a-row>
            <a-row style="margin-left:30px;margin-bottom:20px">
              <a-col :span="24"><span>详细地址： <i>{{form.invoice.acceptAddr}}</i></span></a-col>
            </a-row>
          </div>
        </div>

      </div>

      <!-- 底部 -->
      <div class="botton">
        <div class="submit-options">
          <div @click='okSubmit'>确认提交</div>
          <div @click="backs">返回修改</div>
        </div>
      </div>

    </div>
    <div class="max_right">
      <a-anchor :get-container="getContainer">
        <a-anchor-link href="#top"
                       title="企业信息" />
        <a-anchor-link href="#bot"
                       title="开票信息" />
      </a-anchor>
    </div>
  </div>
</template>
<script>
import '@/assets/css/form.less'
import setting from '@/settings.js'

export default {
  data () {
    return {
      invoiceObject: {
        '1': '增值税普通发票',
        '2': '增值税专用发票'
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      form: {
        // 企业id
        tenantId: '',
        // 门头照片
        doorPicId: '',
        // 工作间照片
        workshopPicId: ['', ''],
        // 营业执照照片
        businessLicensePicId: '',
        // 身份证正面
        idCardFrontPicId: '',
        // 身份证背面
        idCardBackPicId: '',
        // 公司名称
        tenantName: '',
        // 公司简称
        // shortName: '',
        // 地址信息
        address: {
          // 详细地址
          detailAddr: ''
        },
        // 法人代表
        legalPerson: '',
        // 法人代表身份证
        legalPersonIdCard: '',
        // 统一社会信用代码
        creditCode: '',
        // 联系人
        contact: '',
        // 联系电话
        mobile: '',
        // 发票信息
        invoice: {
          // 发票类型
          invoiceType: '1',
          // 发票抬头
          title: '',
          // 纳税人识别号
          taxRegNo: '',
          // 收件人
          accepter: '',
          // 联系电话
          acceptMobile: '',
          // 所在区域、
          area: '',
          // 详细地址
          acceptAddr: ''
        },
        auditStatus: '0',
        isAgree: true
      },
      // 上传地址
      uploadUrl: setting.uploadUrl,
      // 预览地址
      previewUrl: setting.previewUrl
    }
  },
  activated () {
    this.getDetails();
  },
  methods: {
    getContainer() {
      return document.getElementById('scroll-container')
    },
    //确定提交
    okSubmit () {
      console.log(this.form);
      this.form.auditStatus = '1'
      this.$store.dispatch('request', this.$api.register.settleSave2s(this.form)).then(res => {
        this.$store.dispatch('user/toFilterUserTenants', true)
        this.$router.push("/enter/enterView/approve");
      })
    },
    // 返回修改
    backs () {
      this.$router.push('/enter/enterView/firmApprove2s');
    },
    // 获取详细信息
    getDetails () {
      this.$store.dispatch('user/toFilterUserTenants').then(() => {
        this.$store.dispatch('request', this.$api.register.get2sDetail(this.currentTenant.id)).then(res => {
          let result = res.result;
          for (let key in result) {
            if (result[key]) {
              this.form[key] = result[key];
            }
          }
        })
      })

    },
  },
  computed: {
    currentTenant () {
      return this.$store.state.user.currentTenant
    }
  }
}
</script>
<style lang="less" scoped>
.max {
  overflow: hidden;
  padding-left: 76px;
  margin-top: 40px;

  .max_left {
    width: 904px;
    float: left;

    .maxleftbox,
    .writMessage {
      border: 1px solid @colorCommonFont;

      .maxleft_title {
        height: 48px;
        background-color: @greyDeepBackground;
        font-size: 16px;
        line-height: 48px;
        padding-left: 16px;
        color: @colorCommonFont;
      }

      .avatars {
        width: 200px;
        height: 120px;
        .flex(center, center);

        img {
          max-width: 200px;
          max-height: 120px;
        }
      }

      .maxleft_title1 {
        overflow: hidden;
        padding: 24px 25px 0;

        .photos {
          > div {
            float: left;

            p {
              margin-top: 10px;
              margin-bottom: 24px;
            }
          }

          p {
            text-align: center;
            color: @colorGreyFont;
            font-size: 12px;

            i {
              color: #cccccc;
              font-style: normal;
            }
          }
        }

        .photos2 {
          width: 410px;
          margin: 0 20px;

          > div {
            float: left;
            width: 200px;
          }

          div:nth-child(1) {
            margin-right: 10px;
          }

          .ps {
            margin-top: 10px;
            text-align: center;
            color: @colorGreyFont;
            width: 100%;
            font-size: 12px;

            i {
              color: #cccccc;
              font-style: normal;
            }
          }
        }

        .photos4 {
          margin-right: 20px;
        }
      }

      .yaoqiu {
        padding: 24px 25px 24px;

        h4 {
          font-size: 14px;
          color: @colorCommonFont;
          margin-bottom: 15px;
        }

        p {
          font-size: 12px;
          color: @colorGreyFontM;
          margin-bottom: 8px;
        }

        .yaoqiuh4 {
          margin-top: 20px;

          i {
            color: #cccccc;
            font-style: normal;
          }
        }
      }
    }

    .writMessage {
      margin-top: 16px;
    }

    .submit-options {
      width: 360px;
      margin: 30px auto 0;

      div {
        display: inline-block;
        width: 172px;
        height: 32px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
      }

      div:nth-child(1) {
        background: @activeRed;
        margin-right: 16px;
        color: #fff;
      }

      div:nth-child(2) {
        background: @greyDeepBackground;
        color: @colorCommonFont;
      }
    }

    .clickxx {
      width: 580px;
      padding: 0 10px;

      span {
        color: @colorGreyFont;
        line-height: 34px;
        font-size: 12px;

        i {
          font-style: initial;
        }
      }
    }
  }

  .max_right {
    width: 172px;
    float: right;
  }

  .ant-upload.ant-upload-select-picture-card {
    width: 200px;
    height: 120px;
  }
}
</style>
